<template>
    <div class="page-container">
        <el-row>
            <el-col v-for="item in this.result" :key="item.id" :span="8">
                <el-card :body-style="{padding:'0px'}" style="width: 99%;height: 350px;margin-top: 15px;">
                    <div>{{item.title}}</div>
                    <div style="overflow-x: hidden;overflow-y: auto;">
                        <mavon-editor
                                :value="item.htmlContent"
                                :subfield="ss.subfield"
                                :defaultOpen="ss.defaultOpen"
                                :toolbarsFlag="ss.toolbarsFlag"
                                :editable="ss.editable"
                                :scrollStyle="ss.scrollStyle"
                                style="height: 350px;overflow-y:auto;z-index:1;"
                        ></mavon-editor>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
    name: 'Jobs',
    components: {mavonEditor},
    data () {
      return {
        queryParam: {
          type: 'PAGE',
          name: '',
          pageParams: {
            pageNum: 0,
            pageSize: 20,
            sortParams: {}
          },
          queryColumns: ['title', 'htmlContent'],
          queryParams: {
            type: 'SUBJECT_JOBS'
          },
          updateParams: {}
        },
        result: [],
        ss: {
          subfield: false,// 单双栏模式
          defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
          editable: false,
          toolbarsFlag: false,
          scrollStyle: true
        }
      }
    },
    methods: {
      page: function () {
        this.$api.article.findJobPage(this.queryParam).then((res) => {
          if (res.isSuccess == true) {
            this.result=res.body.content
          }
        })
      }
    },
    mounted () {
      this.page()
    },
    computed: {}
  }
</script>

<style scoped>
    .page-container {
        height: 770px;
    }
</style>
